<template>
    <div class="app-container home">
        <div style="position: sticky;top: 0;z-index: 1000">
        <van-dropdown-menu active-color="#66d6ff">
            <van-dropdown-item v-model="value1" :options="option1" @change="getQueryAccHisNew(2)" />
            <van-dropdown-item v-model="value2" :options="option2" @change="getQueryAccHisNew(2)" />
        </van-dropdown-menu>
        </div>
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="getQueryAccHisNew"
        >
            <div class="MList">
                <empty v-if="!list.length"></empty>
                <div v-for="(item,index) in list" :key="index" class="MItem">
                    <img
                        v-if="item.bizType=='REWARD_WITHDRAW' || item.bizType=='GROW_REWARD'|| item.bizType=='SIM_WITHDRAW'|| item.bizType=='SIM_CASHBACK'|| item.bizType=='TAX_WITHDRAW'|| item.bizType=='TAX_CASHBACK'|| item.bizType=='ACTIVE_WITHDRAW'|| item.bizType=='REWARD_CASHBACK'|| item.bizType=='REACH_CASHBACK'|| item.bizType=='AGENT_WITHDRAW'|| item.bizType=='TRANS_PROFIT'"
                        v-bind:src="'/iconImg/'+item.bizType+'.png'" class="left" />
                    <img v-else src="/iconImg/TRANS_PROFIT.png" class="left" />
                    <div class="right">
                        <div class="top">
                            <div class="l">{{ item.remark }}</div>
                            <div class="time">{{ item.createTime }}</div>
                            <div class="money">{{ item.fundSymbol == "SUBTRACT" ? "-" : "+" }} {{ item.transAmt }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script setup name="accountDetail">
import { bizTypeList, queryAccHisNew } from "../../api/agent"

const finished = ref(true)
const loading = ref(false)
const value1 = ref("")
const value2 = ref("")
const pageNum = ref(1)
const list = ref([])
const option1 = ref([])
const option2 = ref([])
const getBizTypeList = () => {
    bizTypeList().then(res => {
        res.object.forEach((item) => {
            item.text = item.bizName
            item.value = item.bizType
        })
        option2.value = res.object
    })
}

const getQueryAccHisNew = (type) => {
    console.log(type,1263456);
    // pageNum.value = 1
    if(type === 2){
        list.value = []
        pageNum.value = 1
    }
    queryAccHisNew({
        bizType: value2.value,
        countMonth: value1.value,
        currentPage: pageNum.value
    }).then(res => {
        if (res.object.dataList.length < 10) {
            loading.value = false
            finished.value = true
        } else {
            pageNum.value++
            loading.value = false
            finished.value = false
        }
        option1.value = []
        res.object.monthList.map((item) => {
            option1.value.push({
                text: item,
                value: item
            })
        })
        list.value = [...list.value, ...res.object.dataList]
        console.log( pageNum.value,'list.value123456----------')
    })
}
const doHandleDate = () => {
    var myDate = new Date()
    var tYear = myDate.getFullYear()
    var tMonth = myDate.getMonth()
    var m = tMonth + 1
    if (m.toString().length == 1) {
        m = "0" + m
    }
    return tYear + "-" + m
}

value1.value = doHandleDate()
getQueryAccHisNew()
getBizTypeList()

</script>

<style scoped lang="scss">

.MList {
    position: relative;
    z-index: 2;
    padding: 0 10px;

    .MItem {
        background: white;
        border-radius: 10px;
        padding: 10px;
        display: flex;
        align-items: center;
        margin-top: 10px;

        .left {
            height: 33px;
            width: 33px;
            margin-right: 15px;
        }

        .right {
            flex: 1;

            .top {
                display: flex;
                // justify-content: space-between;
                align-items: center;

                .l {
                    font-size: 13px;
                    //  font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #545454;
                    flex: 1.3;
                }

                .time {
                    font-size: 11px;
                    //  font-family: Source Han Sans CN;
                    font-weight: 400;
                    width: 120px;
                    color: #9A9A9A;
                }

                .money {
                    font-size: 13px;
                    //  font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #EBCD68;
                    flex: 1;
                    text-align: right;
                }
            }
        }

    }
}

</style>

